<template>
  <div>
    <a-card :style="{height: height, overflow: 'auto'}">
      <a-spin :spinning="confirmLoading">
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row>
            <a-col :span="12">
              <a-form-item :label="$t('m.eform.formDesign.label.biao-ming')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-input v-model="data.tableName" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-biao-ming')"></a-input>
                <a-button-group>
                  <a-button @click="selectTable">{{ $t('m.common.button.selectEntityTable') }}</a-button>
                  <a-button @click="selectDbTable">{{ $t('m.common.button.selectDbTable') }}</a-button>
                </a-button-group>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="$t('m.eform.formDesign.label.zi-dong-zhan-kai-ceng-ji')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-input-number v-model="data.level" :min="0" :max="3" :step="1" style="width:100%"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item :label="$t('m.eform.formDesign.label.zhu-jian-zi-duan')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-select
                  v-model="data.keyName"
                  :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-zhu-jian-zi-duan')"
                  :options="data.cols"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="$t('m.eform.apptable.other.display_field')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-select
                  v-model="data.titleName"
                  :placeholder="$t('m.eform.apptable.placeholder.labelField')"
                  :options="data.cols"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item :label="$t('m.eform.formDesign.label.wai-jian-zi-duan')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-select
                  v-model="data.parentKeyName"
                  :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-wai-jian-zi-duan')"
                  :options="data.cols"
                  allowClear
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="$t('m.eform.formDesign.label.gen-jie-dian-zhi')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-input v-model="data.rootValue" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-gen-jie-dian-zhi')" allowClear></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item :label="$t('m.eform.formDesign.label.pai-xu-zi-duan')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-select
                  v-model="data.orderName"
                  :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-pai-xu-zi-duan')"
                  :options="data.cols"
                  allowClear
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item :label="$t('m.eform.formDesign.label.pai-xu-fang-shi')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-select
                  v-model="data.orderType"
                  :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-pai-xu-fang-shi')"
                  :options="orderType"
                  allowClear
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item :label="$t('m.eform.formDesign.label.yun-xu-xin-zeng')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-checkbox :checked="data.buttonNew" @change="onChangeButtonNew">{{this.$t('m.common.label.yes')}}</a-checkbox>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="data.buttonNew">
              <a-form-item :label="$t('m.eform.formDesign.label.guan-lian-xin-zeng-biao-dan')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <FormCodeTag v-model="data.formNew" :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-xin-zeng-biao-dan')" :groupId="groupId"></FormCodeTag>
              </a-form-item>
              <a-form-item :label="$t('m.eform.formDesign.label.xin-zeng-bie-ming')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-input v-model="data.addAlias" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-xin-zeng-bie-ming')" allowClear></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item :label="$t('m.eform.formDesign.label.yun-xu-bian-ji')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-checkbox :checked="data.buttonEdit" @change="onChangeButtonEdit">{{this.$t('m.common.label.yes')}}</a-checkbox>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="data.buttonEdit">
              <a-form-item :label="$t('m.eform.formDesign.label.guan-lian-bian-ji-biao-dan')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <FormCodeTag v-model="data.formEdit" :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-bian-ji-biao-dan')" :groupId="groupId"></FormCodeTag>
              </a-form-item>
              <a-form-item :label="$t('m.eform.formDesign.label.bian-ji-bie-ming')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-input v-model="data.editAlias" :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-bian-ji-bie-ming')" allowClear></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item :label="$t('m.eform.formDesign.label.yun-xu-shan-chu')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-checkbox :checked="data.buttonDel" @change="onChangeButtonDel">{{this.$t('m.common.label.yes')}}</a-checkbox>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="data.buttonDel">
              <a-form-item :label="$t('m.eform.formDesign.label.shan-chu-qian-shi-jian')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-input v-model="data.buttonBeforeDelFunc" allowClear :placeholder="$t('m.eform.appview.other.java_event_tip')"/>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="data.buttonDel">
              <a-form-item :label="$t('m.eform.appform.entity.objectName')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <object-code-tag v-model="data.objectCode" :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-er-mo-xing')" :groupId="groupId"></object-code-tag>
              </a-form-item>
            </a-col>
            <a-col :span="12" v-if="data.buttonDel">
              <a-form-item :label="$t('m.eform.formDesign.label.shan-chu-qian-jiao-ben')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <script-button v-model="data.buttonBeforeDelGroovy" :label="$t('m.bpm.design.after_script_button_name')" help-code="beforeTreeDelForGroovy" :groovy="true"></script-button>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item :label="$t('m.eform.formDesign.label.guo-lv-tiao-jian')" :labelCol="colLayout2.fixed.labelCol" :wrapperCol="colLayout2.fixed.wrapperCol">
                <ych-code-editor
                  v-model="data.whereSql"
                  language="sql"
                  :fullScreen="true"
                  :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-guo-lv-tiao-jian')"
                  style="min-height: 50px"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-item :label="$t('m.eform.formDesign.label.da-kai-fang-shi')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                <a-select v-model="data.dialogSize" :placeholder="$t('m.eform.formDesign.label.qing-xuan-ze-da-kai-fang-shi')" :allowClear="false">
                  <a-select-option v-for="item in dialogSizeArr" :key="item.value" :value="item.value">
                    {{ item.text }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

        </a-form>

        <select-table-dialog ref="selectTableDialog" @selectFinished="selectTableOk" :groupId="groupId"/>
        <select-db-table-dialog ref="selectDbTableDialog" @selectFinished="selectDbTableOk"/>
      </a-spin>
    </a-card>
  </div>
</template>

<script>

  import { randomNumber } from '@/utils/util'
  import { postAction } from '@/api/manage'
  import SelectTableDialog from '../../select/dialog/SelectTableDialog'
  import SelectDbTableDialog from '../../select/dialog/SelectDbTableDialog'
  import FormCodeTag from '../../select/tag/FormCodeTag'
  import YchConstant from "@/api/YchConstant";
  import { GardLayoutMixin } from '@/mixins/GardLayoutMixin'
  import ObjectCodeTag from "../../select/tag/ObjectCodeTag";
  import {YchCodeEditor} from '@yuncheng/ych-components'
  import {EFormConstant} from "../../EFormConstant";
  import ScriptButton from "../designer/packages/ScriptButton";

  export default {
    name: 'TreeSingle',
    mixins: [GardLayoutMixin],
    components: {
      SelectTableDialog,
      SelectDbTableDialog,
      FormCodeTag,
      ObjectCodeTag,
      YchCodeEditor,
      ScriptButton
    },
    props: {
      layout: {
        type: String,
        required: false
      },
      groupId: {
        type: String,
        required: true
      },
      model: {
        type: Object,
        required: false,
        default: () => {
        }
      },
    },
    data () {
      return {
        dialogSizeArr: EFormConstant.dialogSize.concat([{
          text: this.$t('m.eform.eformConstant.dialogSize.tab'),
          label: this.$t('m.eform.eformConstant.dialogSize.tab'),
          value: 'tab'
        }]),
        data: {},
        labelCol: {
          span: 8
        },
        wrapperCol: {
          span: 16
        },
        confirmLoading: false,
        url: {
          parseSql: YchConstant.PREFIX_EFORM + '/engine/viewEngine/parseSql',
        },
        height: document.body.clientHeight - 53 - 235 + 'px',
        orderType: [{
          key: 'ASC',
          title: this.$t('m.eform.formDesign.label.zheng-xu')
        }, {
          key: 'DESC',
          title: this.$t('m.eform.formDesign.label.dao-xu')
        }]
      }
    },
    methods: {
      setData (value) {
        const json = value ? JSON.parse(value) : {}
        if ('1' != json.type) {
          return
        }
        const data = json.data ? json.data : {}
        data.cols = data.cols || []
        data.level = data.level || 0
        data.orderType = data.orderType || 'ASC'
        data.buttonNew = data.buttonNew || false
        data.buttonEdit = data.buttonEdit || false
        data.buttonDel = data.buttonDel || false
        this.data = data
      },
      getData (formData) {
        formData.treeData = JSON.stringify({
          type: '1',
          data: this.data
        })
        formData.viewSql = this.getViewSql()
        formData.actAppViewColList = this.getColList()
        formData.tableName = this.data.tableName
      },
      getViewSql () {
        if (this.data.tableName) {
          const sql = 'select ' + this.data.keyName + ', ' + this.data.titleName + ' from ' + this.data.tableName
          return sql
        } else {
          return ''
        }
      },
      getColList () {
        const dataSource = []
        if (this.data.keyName) {
          dataSource.push(this.createColData(this.data.keyName, 1))
        }
        if (this.data.titleName) {
          dataSource.push(this.createColData(this.data.titleName, 2))
        }
        return dataSource
      },
      createColData (key, orderNum) {
        let timestamp = new Date().getTime()
        let id = '' + timestamp + randomNumber(6)
        const colOption = this.data.cols.find(vo => vo.key == key)
        const data = {
          id: id,
          colCode: key,
          colName: colOption ? colOption.title : key,
          colType: 'varchar',
          orderNum: orderNum
        }
        return data
      },
      selectTable () {
        this.$refs.selectTableDialog.dsCode = this.model.dsCode
        this.$refs.selectTableDialog.radio = true
        this.$refs.selectTableDialog.visible = true
      },
      selectTableOk (selectedRowKeys, selectionRows) {
        this.model.dsCode = selectionRows[0].dsCode
        this.data.tableName = selectionRows[0].tableName
        this.parseSql()
      },
      selectDbTable () {
        this.$refs.selectDbTableDialog.queryParam.dsCode = this.model.dsCode
        this.$refs.selectDbTableDialog.radio = true
        this.$refs.selectDbTableDialog.visible = true
      },
      selectDbTableOk (selectedRowKeys, selectionRows) {
        this.model.dsCode = selectionRows[0].dsCode
        this.data.tableName = selectionRows[0].tableName
        this.parseSql()
      },
      parseSql () {
        const sql = 'select * from ' + this.data.tableName
        this.confirmLoading = true
        postAction(this.url.parseSql + '?dsCode=' + this.model.dsCode, {
          sql: sql
        }).then((res) => {
          if (res.success) {
            this.initTable(res.result)
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      },
      initTable (tables) {
        if (!tables) {
          this.messageUtil.warning(this.$t('m.common.tip.return_data_null'))
          return
        }
        const dataSource = []
        tables.forEach(table => {
          this.initColumn(table.columns, dataSource)
        })
        this.data.cols = [...dataSource]
        this.messageUtil.success(this.$t('m.common.tip.sql_ok'))
      },
      initColumn (columns, dataSource) {
        columns.forEach(column => {
          const data = {
            key: column.colAlias,
            title: column.colDesc || column.colAlias,
          }
          dataSource.push(data)
        })
      },
      onChangeButtonNew (e) {
        this.data.buttonNew = e.target.checked
      },
      onChangeButtonEdit (e) {
        this.data.buttonEdit = e.target.checked
      },
      onChangeButtonDel (e) {
        this.data.buttonDel = e.target.checked
      },
    },
    watch: {
      layout: {
        handler (value) {
          this.setData(value)
        },
        immediate: true
      },
    }
  }
</script>
